<template>
  <div class="fastItem">
    <van-image :src="item.image"></van-image>
    <div class="fastRight">
      <div class="name">{{item.store_name}}</div>
      <div class="fastPrice">
        促销价：￥{{item.price}}
      </div>
      <div class="outPrice_stock">
        <div class="otPrice">日常价：￥{{item.ot_price}}</div>
        <div class="stock">
          仅剩：{{item.stock}}{{item.unit_name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'FastItem',
  props:['item'],
}
</script>

<style lang="less" scoped>
.fastItem{
  display: flex;
  border-bottom: 1px solid #eee;
  padding-bottom: 3vh;
  .van-image{
    width: 33vw;
    height: 23vw;
  }
  .fastRight{
    margin-left: 5vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    .name{
      text-align: left;
      font-size: 0.4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
      -webkit-box-orient: vertical;
    }
    .fastPrice{
      background: rgb(228, 22, 22);
      padding: .6vh .9vh;
      color: white;
      font-size: 0.3rem;
      border-top-left-radius: 12px;
      border-bottom-right-radius: 12px;
    }
    .outPrice_stock{
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: rgb(148, 138, 138);
      font-size: 0.3rem;
      .otPrice{
      text-decoration: line-through;

      }
      .stock{
      }
    }
  }
}
</style>